﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListFiles.aspx.cs" EnableViewState="false"
    Inherits="Manage_Modle_UploadFile_ListFiles" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <base target="_self" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="MSHTML 6.00.2900.3132" name="GENERATOR" />
    <link href="../../css/mainFrom.css" rel="stylesheet" type="text/css" />
    <link href="../../css/FileUpload.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
            function ShowMove(objShow)
            {
                objShow.childNodes[1].style.display = 'block';
            }
            function HideMove(objHide)
            {
                objHide.childNodes[1].style.display = 'none';
                //objHide.childNodes[1].style.display = 'none';
            }
            function RemoveItem(objRemove)
            {
                document.getElementById("divChecked").removeChild(objRemove.parentNode.parentNode);
            }
            function AddItem(ImgID)
            {
                var obj = document.getElementById(ImgID);
                document.getElementById("divChecked").innerHTML += GetItemHtml(obj.src);
            }
            function GetItemHtml(strSrc)
            {
                var divCheckedItem = '<div class="divCheckItem" onmouseover="ShowMove(this);" onmouseleave="HideMove(this);" >' +
                    '<div class="divCheckImg">' + 
                        '<a href="' + strSrc + '" target="_blank"><img  src="' + strSrc + '" alt="" onload="resizeImage(this, 139, 104);" /></a>' +
                    '</div>' +
                    '<div class="divRemove"><img src="../../images/drop-no.gif" alt="取消选择" onclick="RemoveItem(this);" style="cursor:hand;" /></div>' +
                '</div> ';
                return divCheckedItem;
            }
        </script>
    <script language="javascript" type="text/javascript">
        function resizeImage(obj, MaxW, MaxH)
        {
            var imageObject = obj;
            var state = imageObject.readyState;
            if(state!='complete') 
            {
                setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+")",50);
                return;
            }
            var oldImage = new Image();
            oldImage.src = imageObject.src;
            var dW = oldImage.width; 
            var dH = oldImage.height;
            if(dW>MaxW || dH>MaxH) 
            {
                a = dW/MaxW; b = dH/MaxH;
                if( b>a ) a = b;
                dW = dW/a; dH = dH/a;
            }
            if(dW > 0 && dH > 0) 
            {
                imageObject.width = dW;
                imageObject.height = dH;
            }
        }

        function fileBrowse()
        {
            document.getElementById("leftCate").style.display = "block";
            document.getElementById("RightCate").style.display = "block";
            document.getElementById("divUpLoad").style.display = "none";
            document.getElementById("tdBrowse").className = "CheckedTab";
            document.getElementById("tdUpload").className = "NoCheckTab";
        }
        function fileUpload()
        {
            document.getElementById("leftCate").style.display = "none";
            document.getElementById("RightCate").style.display = "none";
            document.getElementById("divUpLoad").style.display = "block";
            document.getElementById("tdBrowse").className = "NoCheckTab";
            document.getElementById("tdUpload").className = "CheckedTab";
        }
        function checkOK()
        {
            var strFileInfo = "";
            var obj = document.getElementById("divChecked");
            if(obj.innerHTML != "")
            {
                var arrItems = obj.childNodes;
                for(var i=0;i<arrItems.length;i++)
                {
                    var arrImgs = arrItems[i].childNodes;
                    var strSrc = arrImgs[0].childNodes[0].childNodes[0].src;
                    //把域名过滤掉
                    strSrc = strSrc.replace("http://" + location.host, "");
                    strFileInfo += "|" + strSrc;
                }
            }
            if(strFileInfo != "")
            {
                if(strFileInfo.substring(0, 1) == "|")
                {
                    strFileInfo = strFileInfo.substring(1, strFileInfo.length);
                }
            }
            top.CheckedFile(strFileInfo);
        }
        
        function InitCheckedFile()
        {
            try
            {
                document.getElementById("divChecked").innerHTML = "";
                var strCheck = top.objCheck.value;
                if(strCheck != "")
                {
                    var arrCheckedImg = strCheck.split('|');
                    if(arrCheckedImg.length > 0)
                    {
                        for(var i=0; i<arrCheckedImg.length; i++)
                        {
                            document.getElementById("divChecked").innerHTML += GetItemHtml(arrCheckedImg[i]);
                        }
                    }
                }
            }
            catch(e)
            {}
        }
        
        function clearChecked()
        {
            document.getElementById("divChecked").innerHTML = "";
        }
    </script>
</head>
<body  onload="InitCheckedFile();">
    <form id="form1" runat="server">
        <div id="incontent" style="width:860px;">
            <div class="clear">
            </div>
            <div>
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td id="tdBrowse" onclick="fileBrowse();" class="NoCheckTab">
                            浏览附件
                        </td>
                        <td id="tdUpload" onclick="fileUpload();" class="CheckedTab">
                            上传附件
                        </td>
                    </tr>
                </table>
            </div>
            <div class="contable">
                <div id="leftCate" style="width: 220px; float: left; display:none;">
                    <div class="TreeMenu" id="CategoryTree">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div id="RightCate" style="width: 600px; float: left; display:none;">
                    <div id="divPanel" style="width:600px;">
                    </div>
                    <div id="divPage" class="divPage">
                    </div>
                </div>                
            </div>
            <div class="clear">
            </div>
            当前选择：<br />
            <div id="divChecked" style="width:860px;"></div>
            <input type="button" value="确定" class="button" onclick="checkOK();" />&nbsp;<input type="button" class="button" value="清空" onclick="clearChecked();" />
        </div>
    </form>
    <div id="contable"  style="width:860px;">
        <div id="divUpLoad" style="width: 800px; display:block; border:#006600 solid 1px;">
            <form id="uploadForm" action="AspxFileUpload.ashx">
              <table border="0" cellspacing="1" class="fu_list">
                <thead>
                  <tr>
                    <td colspan="2"><b>上传文件</b></td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td align="right" width="15%" style="line-height:35px;">添加文件：</td>
                    <td><a href="javascript:void(0);" class="files" id="idFile"></a> <img id="idProcess" style="display:none;" src="../../images/fileloading.gif" alt="" /></td>
                  </tr>
                  <tr>
                    <td colspan="2"><table border="0" cellspacing="0">
                        <thead>
                          <tr>
                            <td>文件路径</td>
                            <td width="100"></td>
                          </tr>
                        </thead>
                        <tbody id="idFileList">
                        </tbody>
                      </table></td>
                  </tr>
                  <tr>
                    <td colspan="2" style="color:gray">温馨提示：最多可同时上传 <b id="idLimit"></b> 个文件，只允许上传 <b id="idExt"></b> 文件。 </td>
                  </tr>
                  <tr>
                    <td colspan="2" align="center" id="idMsg"><input type="button" value="开始上传" id="idBtnupload" disabled="disabled" />
                      &nbsp;&nbsp;&nbsp;
                      <input type="button" value="全部取消" id="idBtndel" disabled="disabled" />
                    </td>
                  </tr>
                </tbody>
              </table>
            </form>
        </div>
    </div>
    <script language="javascript" type="text/javascript">
        this.ListFiles = Manage_Modle_UploadFile_ListFiles;
    </script>
    <script language="javascript" type="text/javascript" src="../../js/Attachment/Model.js"></script>
    <script language="javascript" type="text/javascript" src="../../js/Attachment/Control.js"></script>
    <script language="javascript" type="text/javascript" src="../../js/Attachment/Menu.js"></script>
    <script language="javascript" type="text/javascript" src="../../js/Attachment/PagePannel.js"></script>
    <script language="javascript" type="text/javascript" src="../../js/Attachment/Panel.js?"></script>
    <script language="javascript" type="text/javascript" src="../../js/Attachment/ViewMgr.js"></script>
    <script language="javascript" type="text/javascript">
    // JScript 文件
var isIE = (document.all) ? true : false;

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

var Extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
}

var Bind = function(object, fun) {
	return function() {
		return fun.apply(object, arguments);
	}
}

var Each = function(list, fun){
	for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

//文件上传类
var FileUpload = Class.create();
FileUpload.prototype = {
  //表单对象，文件控件存放空间
  initialize: function(form, folder, options) {
	
	this.Form = $(form);//表单
	this.Folder = $(folder);//文件控件存放空间
	this.Files = [];//文件集合
	
	this.SetOptions(options);
	
	this.FileName = this.options.FileName;
	this._FrameName = this.options.FrameName;
	this.Limit = this.options.Limit;
	this.Distinct = !!this.options.Distinct;
	this.ExtIn = this.options.ExtIn;
	this.ExtOut = this.options.ExtOut;
	
	this.onIniFile = this.options.onIniFile;
	this.onEmpty = this.options.onEmpty;
	this.onNotExtIn = this.options.onNotExtIn;
	this.onExtOut = this.options.onExtOut;
	this.onLimite = this.options.onLimite;
	this.onSame = this.options.onSame;
	this.onFail = this.options.onFail;
	this.onIni = this.options.onIni;
	
	if(!this._FrameName){
		//为每个实例创建不同的iframe
		this._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
		//ie不能修改iframe的name
		var oFrame = isIE ? document.createElement("<iframe name=\"" + this._FrameName + "\">") : document.createElement("iframe");
		//为ff设置name
		oFrame.name = this._FrameName;
		oFrame.style.display = "none";
		//在ie文档未加载完用appendChild会报错
		document.body.insertBefore(oFrame, document.body.childNodes[0]);
	}
	
	//设置form属性，关键是target要指向iframe
	this.Form.target = this._FrameName;
	this.Form.method = "post";
	//注意ie的form没有enctype属性，要用encoding
	this.Form.encoding = "multipart/form-data";

	//整理一次
	this.Ini();
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
		FileName:	"",//文件上传控件的name，配合后台使用
		FrameName:	"",//iframe的name，要自定义iframe的话这里设置name
		onIniFile:	function(){},//整理文件时执行(其中参数是file对象)
		onEmpty:	function(){},//文件空值时执行
		Limit:		0,//文件数限制，0为不限制
		onLimite:	function(){},//超过文件数限制时执行
		Distinct:	true,//是否不允许相同文件
		onSame:		function(){},//有相同文件时执行
		ExtIn:		[],//允许后缀名
		onNotExtIn:	function(){},//不是允许后缀名时执行
		ExtOut:		[],//禁止后缀名，当设置了ExtIn则ExtOut无效
		onExtOut:	function(){},//是禁止后缀名时执行
		onFail:		function(){},//文件不通过检测时执行(其中参数是file对象)
		onIni:		function(){}//重置时执行
    };
    Extend(this.options, options || {});
  },
  //整理空间
  Ini: function() {
	//整理文件集合
	this.Files = [];
	//整理文件空间，把有值的file放入文件集合
	Each(this.Folder.getElementsByTagName("input"), Bind(this, function(o){
		if(o.type == "file"){ o.value && this.Files.push(o); this.onIniFile(o); }
	}))
	//插入一个新的file
	var file = document.createElement("input");
	file.name = this.FileName; file.type = "file"; file.onchange = Bind(this, function(){ this.Check(file); this.Ini(); });
	this.Folder.appendChild(file);
	//执行附加程序
	this.onIni();
  },
  //检测file对象
  Check: function(file) {
	//检测变量
	var bCheck = true;
	//空值、文件数限制、后缀名、相同文件检测
	if(!file.value){
		bCheck = false; this.onEmpty();
	} else if(this.Limit && this.Files.length >= this.Limit){
		bCheck = false; this.onLimite();
	} else if(!!this.ExtIn.length && !RegExp("\.(" + this.ExtIn.join("|") + ")$", "i").test(file.value)){
		//检测是否允许后缀名
		bCheck = false; this.onNotExtIn();
	} else if(!!this.ExtOut.length && RegExp("\.(" + this.ExtOut.join("|") + ")$", "i").test(file.value)) {
		//检测是否禁止后缀名
		bCheck = false; this.onExtOut();
	} else if(!!this.Distinct) {
		Each(this.Files, function(o){ if(o.value == file.value){ bCheck = false; } })
		if(!bCheck){ this.onSame(); }
	}
	//没有通过检测
	!bCheck && this.onFail(file);
  },
  //删除指定file
  Delete: function(file) {
	//移除指定file
	this.Folder.removeChild(file); this.Ini();
  },
  //删除全部file
  Clear: function() {
	//清空文件空间
	Each(this.Files, Bind(this, function(o){ this.Folder.removeChild(o); })); this.Ini();
  }
}

var fu = new FileUpload("uploadForm", "idFile", { Limit: 3, ExtIn: ["jpg", "gif"],
	onIniFile: function(file){ file.value ? file.style.display = "none" : this.Folder.removeChild(file); },
	onEmpty: function(){ alert("请选择一个文件"); },
	onLimite: function(){ alert("超过上传限制"); },
	onSame: function(){ alert("已经有相同文件"); },
	onNotExtIn:	function(){ alert("只允许上传" + this.ExtIn.join("，") + "文件"); },
	onFail: function(file){ this.Folder.removeChild(file); },
	onIni: function(){
		//显示文件列表
		var arrRows = [];
		if(this.Files.length){
			var oThis = this;
			Each(this.Files, function(o){
				var a = document.createElement("a"); a.innerHTML = "取消"; a.href = "javascript:void(0);";
				a.onclick = function(){ oThis.Delete(o); return false; };
				arrRows.push([o.value, a]);
			});
		} else { arrRows.push(["<font color='gray'>没有添加文件</font>", "&nbsp;"]); }
		AddList(arrRows);
		//设置按钮
		$("idBtnupload").disabled = $("idBtndel").disabled = this.Files.length <= 0;
	}
});

$("idBtnupload").onclick = function(){
	//显示文件列表
	var arrRows = [];
	Each(fu.Files, function(o){ arrRows.push([o.value, "&nbsp;"]); });
	AddList(arrRows);
	
	fu.Folder.style.display = "none";
	$("idProcess").style.display = "";
	$("idMsg").innerHTML = "正在添加文件到您的网盘中，请稍候……<br />有可能因为网络问题，出现程序长时间无响应，请点击“<a href='?'><font color='red'>取消</font></a>”重新上传文件";
	try
	{
	fu.Form.submit();
	}
	catch(e)
	{
	    alert(e.Message);
	}
}

//用来添加文件列表的函数
function AddList(rows){
	//根据数组来添加列表
	var FileList = $("idFileList"), oFragment = document.createDocumentFragment();
	//用文档碎片保存列表
	Each(rows, function(cells){
		var row = document.createElement("tr");
		Each(cells, function(o){
			var cell = document.createElement("td");
			if(typeof o == "string"){ cell.innerHTML = o; }else{ cell.appendChild(o); }
			row.appendChild(cell);
		});
		oFragment.appendChild(row);
	})
	//ie的table不支持innerHTML所以这样清空table
	while(FileList.hasChildNodes()){ FileList.removeChild(FileList.firstChild); }
	FileList.appendChild(oFragment);
}


$("idLimit").innerHTML = fu.Limit;

$("idExt").innerHTML = fu.ExtIn.join("，");

$("idBtndel").onclick = function(){ fu.Clear(); }

//在后台通过window.parent来访问主页面的函数
function Finish(msg){ alert(msg); location.href = location.href; }    
    
    </script>
    <script language="javascript" type="text/javascript">
        CControl.sm_instance = new CControl();
        CControl.sm_instance.Init();
    </script>
</body>
</html>
